相信各位看官們很熟悉各種Html的Events事件，
這篇呢~我們要透過上一篇所提到的State傳入子類別的方式套用再Event上面!

• 首先，我們先在Component裡建立一個function，這個function，小菜鳥很單純的只改變了一個state的值

  class FormController extends React.Component{
          constructor(props) {
          	this.state ={
          		test:""
          	}
          }
  
  
          function setTestState(){
          	this.setState({
          		test:"1234"
          	})
          }
  
      }
  

• 接著，將這個function綁在這個Class上

  class FormController extends React.Component{
          constructor(props) {
          	this.state ={
          		test:""
          	}
          	this.setTestState=this.setTestState.bind(this);
          }
  
  
          function setTestState(){
          	this.setState({
          		test:"1234"
          	})
          }
  
      }
  

• 將function 傳入子類別當作prop使用

  import Test from '../../TestComponent/Test';
  class FormController extends React.Component{
          constructor(props) {
          	this.state ={
          		test:""
          	}
          	this.setTestState=this.setTestState.bind(this);
          }
  
  
          function setTestState(){
          	this.setState({
          		test:"1234"
          	})
          }
  
  
  
          render(){
          	return(
          		<Test
          			setTestState={this.setTestState}
          		/>
          	)
          }
  
      }
  

• 在子類別透過觸發事件來執行父類別傳來的 prop function

  class Test extends React.Component{
          constructor(props) {
  
          }
  
  
  
          render(){
         		const {setTestState} = this.props;
  
          	return(
          		<div>
          			<input onChange={setTestState}/>
          		</div>
          	)
          }
  
      }
  

當然上面是屬於最陽春的方式，我們也可以在子類別傳入參數給prop function，
進而在父類別拿到子類別傳入的參數來作使用。

假設我不想要我的state一直都是1234，我想要自己定義這個state的值

• 在父類別建立function，且綁定在這個Class上

  class FormController extends React.Component{
          constructor(props) {
          	this.state ={
          		test:""
          	}
          	this.setTestState=this.setTestState.bind(this);
          }
  
  
          function setTestState(value){
          	this.setState({
          		test:value
          	})
          }
  
      }
  

• 接著在子類別傳入參數

  class Test extends React.Component{
          constructor(props) {
  
          }
  
  
  
          render(){
         		const {setTestState} = this.props;
  
          	return(
          		<div>
          			<input onChange={function(e){setTestState(e.target.valaue)}}/>
          		</div>
          	)
          }
  
      }
  

這邊作一個小小補充! 就是ES6有一個寫法可以預設傳入參數的值

• 在父類別建立function的時候給予參數預設值，
• 當我們在子類別使用這個function的時候，沒有傳入參數的話，我們的value就會是1234了

class FormController extends React.Component{
        constructor(props) {
        	this.state ={
        		test:""
        	}
        	this.setTestState=this.setTestState.bind(this);
        }
        
        
        function setTestState(value='1234'){
        	this.setState({
        		test:value
        	})
        }
    
    }

最後再一個小小提醒 ! 當父類別的State變動時，子類別裡的Prop會重新渲染

這邊小菜鳥說明了如何將父類別function傳入子類別，變成prop來襄在事件上面。

下一篇，我們要來說明React的一個外部套件 => Prop Types

PropTypes 簡單來說，就是拿來檢查 prop的型別及是否是必要傳入的prop

希望看到這邊，各位看官們還沒有要睡著的跡象 ( ･ั﹏･ั)